<template>
  Event List2，使用Suspense标签
  <Suspense>
    <EventList2Child></EventList2Child>
  </Suspense>
</template>

<script>
import axios from 'axios'
import {onMounted, ref} from 'vue'
import {effect} from "@vue/reactivity"

const EventList2Child = {
  name: "EventList2Child",
  template: `
    <div v-for="item in data">
    <router-link :to="item.link">{{ item.id }}</router-link>
    </div>`
  ,
  async setup() {
    const res = await axios.get('events/')
    const data = res.data.map(e => {
      e.link = `/event/${e.id}`;
      return e;
    })
    data.push({id: 'error', link: '/event/error'})
    return {data}
  },
}

export default {
  name: "EventList2",
  components: {EventList2Child}
}
</script>
